<style lang="scss">
  /*.zhongHangBg {*/
  /*background: url('/static/images/bankCards/zhongHang.png')no-repeat 100% 100%;*/
  /*}*/
  .bankStyle {
    width:365px;height:210px;display: inline-block; float:left;
    background: no-repeat 50% 50%;position:relative;
  }
  .bankStyle .el-button--text {
    color: white;
  }
</style>
<template>
  <el-row>
    <NoWalletPsw :visible.sync="isShowNoWalletPsw"></NoWalletPsw>
    <delBankCard :visible.sync="isShowDelBankCard" :bankCardId="bankCardId" @refresh="refresh"></delBankCard>
    <el-col :span="24">
      <el-card>
        <div slot="header" class="clearfix">
          <span>银行卡列表</span>
        </div>
        <el-row>
          <div class="bankStyle" v-for="(item) in tableData" :key="item.value"
               :style="{'background': 'url(/api/ms-mongodb/file/download?fileId=' + item.pictureId + ')', 'background-size': 'cover', 'background-repeat': 'no-repeat'}" >
            <div style="text-align: right;color:white;">
              <el-button type="text" v-if="item.isDefault == 0" style="position:absolute;top:14px;right:62px;" :loading="loading"
                         @click.prevent="setDefault(item.id)">设为默认</el-button>&nbsp;
              <el-button type="text" v-if="item.isDefault == 1" style="position:absolute;top:14px;right:62px"
                         class="ladda-button font-white" data-style="zoom-out">默认</el-button>&nbsp;
              <span  @click.prevent.stop="delBankCard(item.id)"
                     style="display:inline-block;width:18px;height:18px; border-radius:18px!important;
                         position:absolute;top:29px;right:28px; cursor:pointer"></span>

              <!--<span style="position:absolute;top:31px;right:150px; color:yellow"> {{item.bankTypeCode | filterDataBaseDictionary}} </span>-->
              <!--<div style="position:absolute;top:158px;right:38px">-->
              <!--<span>{{item.cardholderName}} -&#45;&#45;图片id:&nbsp;&nbsp;{{item.pictureId}}</span>-->
              <!--</div>-->
              <div style="position: absolute; top: 98px; right: 262px;"><span> {{getStartNum(item.cardNo)}}</span></div>
              <div style="position: absolute; top: 97px; right: 62px;"><span> {{getEndNum(item.cardNo)}}</span></div>
            </div>
          </div>
          <div class="bankStyle" style="text-align: center; cursor:pointer;" @click.prevent.stop="showDetail()">
            <div style=" width: 342px;height: 180px;position: absolute;top: 15px; right: 8px;border:1px solid grey;
                  font-weight: 900;border-radius: 10px !important;line-height: 172px;"> <span style="font-size: 50px;"> + </span> </div>
          </div>
        </el-row>
      </el-card>
    </el-col>
    <!--<el-col :span="24">-->
      <!--银行卡首页 界面-->
    <!--</el-col>-->
    <!--<el-col :span="24">-->
      <!--<el-button type="primary" @click="addBank">添加银行卡</el-button>-->
    <!--</el-col>-->
  </el-row>
</template>
<script>
// import {filterDataBaseDictionary} from '@/filters'
import {dotData} from '@/utils'
import NoWalletPsw from '@/views/oms/myWallet/NoWalletPsw'
import delBankCard from '@/views/oms/myWallet/delBankCard'
// import noWalletPsw from '@/components/myWallet/noWalletPsw'
export default {
  name: 'bankCardIndex',
  components: {
    delBankCard,
    NoWalletPsw
  },
  data() {
    return {
      isShowNoWalletPsw: false, // 尚未设置密码 modal
      hasWalletPsw: 0, // 默认没有设 密码
      isShowDelBankCard: false, // 删除银行卡 modal
      loading: false,
      id: this.$route.params.id,
      tableData: [],
      bankCardId: '',
      params: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  created() {
    this.httpGetTableData()
    // 新增银行卡之前 检查是否有 钱包密码，无钱包密码时，需提醒用户去设置钱包密码 httpGetResponse
    this.$ajax.get('/ms-user-wallet/wallet/wallet-validation').then(response => {
      if (dotData(response, 'success')) {
        this.hasWalletPsw = dotData(response, 'data.isPassword')
        // this.hasWalletPsw = 1
        console.log('新增银行卡之前 ---检查有无钱包密码？', this.hasWalletPsw)
        console.log('---类型', typeof this.hasWalletPsw)
      }
    })
  },
  methods: {
    // 银行卡前4位
    getStartNum(cardNum) {
      //        const mpCardNo = cardNum.substr(cardNum.length - 4)
      const mpCardNo = cardNum.substr(0, 4)
      return mpCardNo
    },
    // 银行卡后4位
    getEndNum(cardNum) {
      //        const mpCardNo = cardNum.substr(-4)
      const mpCardNo = cardNum.substr(cardNum.length - 4)
      return mpCardNo
    },
    httpGetTableData() {
      this.$ajax.table('/ms-user-wallet/wallet/walletBanksList').then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.tableData = dotData(response, 'data') || []
          console.log('银行卡列表数据this.tableData', this.tableData)
        } else {
        }
      })
    },
    showDetail() {
      if (this.hasWalletPsw) {
        this.$router.push({path: '/ss-oms/myWallet/addBankCard'})
      } else {
        console.log('有钱包信息+ 未设置钱包密码！')
        this.isShowNoWalletPsw = true
      }
    },
    delBankCard(cardId) {
      this.bankCardId = cardId
      this.isShowDelBankCard = true
    },
    // 提交 设为默认银行卡
    setDefault(thisId) {
      console.log('即将设为默认的卡id', thisId)
      this.loading = true
      this.$ajax.post('/ms-user-wallet/wallet/default-bank', {bankId: thisId}).then(response => {
        const success = dotData(response, 'success')
        this.loading = false
        if (success) {
          this.$confirm('成功设置默认卡', '提示', {
            type: 'success',
            center: true,
            confirmButtonText: '确定',
            showCancelButton: false,
            closeOnClickModal: false
          }).then(_ => {
            this.httpGetTableData()
          })
        }
      })
    },
    refresh() {
      this.httpGetTableData()
    },
    addBank() {
      this.$router.push({path: '/ss-oms/myWallet/addBankCard'})
    }
  }
}
</script>
